<template>
	<view>
		<view class="imgContainer">
			<image :src="newsData.logPath" mode="aspectFill" ></image>
		</view>
		<uni-card :title="newsData.content">
			<text class="uni-body">
				地点:{{newsData.fieldID}}\n
				时间:{{newsData.selectedDate}}\n
				人数:{{newsData.personNum}}/{{newsData.competitionSystem}}\n
				状态:{{newsData.state}}\n
				详情说明:{{newsData.description}}\n
				比赛详情:
			</text>
		</uni-card>
		<button class="button" type="primary" @click="onClick">
			参加比赛
		</button>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="success" cancelText="取消" confirmText="确认" title="通知" content="您已经成功加入"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="errorDialog" type="dialog">
			<uni-popup-dialog type="error" cancelText="取消" confirmText="确认" title="通知" content="您已经参加过了"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<view class="playerCard">
		<uni-card :is-shadow="true" shadow="0rpx 0rpx 5rpx 5rpx rgba(0,0,0,0.5)">
			<view class="playerInfo">
			<image class="playerImg" :src="host.url"></image>
			<text class="playerName" style="font-size: 35rpx;font-weight: bold;">{{host.username}}\n<text style="font-size: 23rpx; color: #999;">房主</text></text>
<!-- 			<view class="star">
			<uni-rate allow-half :value="rate" @change="handleChange(index, $event)"/>
			<view style="margin-top: 20rpx">
			<text style="font-size: 35rpx; color: black;">{{host.star.value}}</text>
			</view>
			</view> -->
			</view>
		</uni-card>
		<uni-card :is-shadow="false" v-for="(item, index) in playerData" :key="index">
			<view class="playerInfo">
			<image class="playerImg" :src="item.url"></image>
			<text class="playerName" style="font-size: 30rpx;">{{item.username}}\n<text style="font-size: 23rpx; color: #999;">{{item.role}}</text></text>
			<view class="star">
			<uni-rate allow-half :value="rate" @change="handleChange(index, $event)"/>
			<view style="margin-top: 20rpx">
<!-- 			<text style="font-size: 35rpx; color: black;">{{item.star}}</text> -->
			</view>
			</view>
			</view>
		</uni-card>
		</view>
	</view>
</template>
<script setup>
	import {
		baseUrl
	} from '../../tool/tool';
	 import { ref } from 'vue';
	import {onLoad,onShow} from '@dcloudio/uni-app'
	const app = getApp();
	const newsData = ref({});
	const alertDialog = ref(null);
	const errorDialog = ref(null);
	const rate = ref(0);
	const host = ref({});
	const flag = ref(false);
	const playerData = ref([]);
	onLoad((query)=>{
		console.log('load');
		console.log('query',query);
		console.log('news',query.news);
		if(query&&query.news){
			try{
				newsData.value = JSON.parse(decodeURIComponent(query.news));
				console.log('data',newsData.value)
			}catch(error){
				console.error('Failed',error);
			}
		}else{
				console.warn('No in' ,query);
		}
	});
	onShow(() => {
		console.log("shasjsahjsjjdas",newsData.value.seriesID)
		uni.request({
			url:baseUrl+"/SeriesGame/getHost?seriesID="+newsData.value.seriesID,
			method:'GET',
			success:(res)=>{
				//console.log("show");
				host.value=res.data;
			}
		}),
		uni.request({
			url:baseUrl+"/SeriesGame/getUserInGame?seriesID="+newsData.value.seriesID,
			method:'GET',
			success:(res)=>{
				console.log("show ",res.data);
				playerData.value=res.data;
			}
		})
	});
		function onClick(){
					// let flag = ref();
			uni.request({
				url:baseUrl+"/SeriesGame/joinGame?seriesID="+newsData.value.seriesID+"&account="+app.globalData.account,
				methods:"GET",
				success:(res)=>{
					if(res.data){
						console.log("参加成功！")
	
						flag.value = res.data;
						// alertDialog.value.open();
						uni.showToast({
							title:"成功",
							icon:'success',
							duration:1500
						})
					}
					else{
						console.log("您已经参加过啦！")
						console.log(app.globalData.account)
						flag.value = res.data;
						console.log(newsData.value.seriesID)
						// errorDialog.open();
						uni.showToast({
							title:"失败",
							icon:'error',
							duration:1500,
						})
					}
				}
			});
		}
			function handleChange(index, value){
				console.log("changed");
				console.log(value)
				playerData[index].star = value;
				console.log(playerData[index].star)
			}
	// import {
	// 	baseUrl
	// } from '../../tool/tool';
	//  import { ref } from 'vue';
	// const app = getApp();
	
	// export default{
	// 	data(){
	// 		return{
	// 			newsData:{},
	// 			alertDialog:null,
	// 			errorDialog:null,
	// 			flag:false,
	// 			rate:0,
	// 			host:{
	// 				// url:,//"http://s-pic.oss-cn-beijing.aliyuncs.com/desensitize/images/publish/b92690c57fdd03bfaba37079231b3d3d.jpg?type=pic",
	// 				// playername:,//"fengbowen",
	// 				// star:0
	// 			},
	// 			playerData:[
	// 				// {
	// 				// 	url:,//"http://s-pic.oss-cn-beijing.aliyuncs.com/desensitize/images/publish/b92690c57fdd03bfaba37079231b3d3d.jpg?type=pic",
	// 				// 	playername:,//"linziyang",
	// 				// 	star:0
	// 				// },
	// 				// {
	// 				// 	url:"http://s-pic.oss-cn-beijing.aliyuncs.com/desensitize/images/publish/b92690c57fdd03bfaba37079231b3d3d.jpg?type=pic",
	// 				// 	playername:"liushangbo",
	// 				// 	star:0
	// 				// }
	// 			]
		
	// 		}
	// 	},
	// 	onLoad(query){
	// 		console.log(query);
	// 		console.log(query.news)
	// 		if(query && query.news){
	// 			try{
	// 				this.newsData = JSON.parse(decodeURIComponent(query.news));
	// 			}catch(error){
	// 				console.error('Failed:',error);
	// 			}
	// 		}else{
	// 			console.warn('No in' ,query);
	// 		}
	// 	},
	// 	onShow() {
			
	// 		console.log("shasjsahjsjjdas",this.newsData.seriesID)
	// 		uni.request({
	// 			url:baseUrl+"/SeriesGame/getHost?seriesID="+this.newsData.seriesID,
	// 			method:'GET',
	// 			success:(res)=>{
	// 				//console.log("show");
	// 				this.host=res.data;
	// 			}
	// 		}),
	// 		uni.request({
	// 			url:baseUrl+"/SeriesGame/getUserInGame?seriesID="+this.newsData.seriesID,
	// 			method:'GET',
	// 			success:(res)=>{
	// 				console.log("show ",res.data);
	// 				this.playerData=res.data;
	// 			}
	// 		})
	// 	},
		
	// 	methods:{
	// 		onClick(){
	// 			// let flag = ref();
	// 			uni.request({
	// 				url:baseUrl+"/SeriesGame/joinGame?seriesID="+this.newsData.seriesID+"&account="+app.globalData.account,
	// 				methods:"GET",
	// 				success:(res)=>{
	// 					if(res.data){
	// 						console.log("参加成功！")

	// 						this.flag = res.data;
	// 						this.$refs.alertDialog.open();
							
	// 					}
	// 					else{
	// 						console.log("您已经参加过啦！")
	// 						console.log(app.globalData.account)
	// 						this.flag = res.data;
	// 						console.log(this.newsData.seriesID)
	// 						this.$refs.errorDialog.open();
	// 					}
	// 				}
	// 			});
	// 			// if(flag.value){
	// 			// 	console.log(flag.value)
	// 			// 	this.$refs.alertDialog.open();
	// 			// }else{
	// 			// 	console.log(flag.value)
	// 			// 	this.$refs.errorDialog.open();
	// 			// }
	// 		},
	// 		handleChange(index, value){
	// 			console.log("changed");
	// 			console.log(value)
	// 			this.playerData[index].star = value;
	// 			console.log(this.playerData[index].star)
	// 		}
	// 	}
	// }
</script>
<style lang="scss" scoped>
.imgContainer{
	width: 750rpx;
	height: 400rpx;
	padding: 0 20rpx;
	image{
		width: 100%;
		height: 100%;
		border-radius: 15rpx;
	}
}
	.button {
		width: 40%;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 20rpx; /* 添加圆角效果 */
	}
	.playerInfo{
		display: flex;
	}

	.playerImg{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		overflow: hidden;
			
		.image {
			width: 100%;
			height: 100%;
		}
	}
	.playerName{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 50rpx;
	}
	.playerCard{
		width: 700rpx;
		margin-left: 25rpx;
		
	}
	.star{
		margin-left: auto;
		text-align: right;
		
	}
</style>